<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript">
			function fadein(input, container) {
				container.fadeIn("slow");
			}

			function fadeout(input, container) {
				container.fadeOut("slow");
			}
		</script>
	</ui:define>

	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Password</h1>
		<div class="entry">
            <p>Password component is an extended version of standard inputSecret component with theme integration and strength indicator.</p>

            <h:form id="form">
		
				<p:panel header="Enter your passwords">
					<h:panelGrid columns="2">
						<h:outputText value="Non-Feedback: " />
						<p:password id="nonFeedback" value="#{passwordBean.password1}" feedback="false" />

                        <h:outputText value="Feedback: " />
						<p:password id="feedback" value="#{passwordBean.password2}" />

						<h:outputText value="Feedback (Turkish): " />
						<p:password id="turkishFeedback" value="#{passwordBean.password3}" promptLabel="Lütfen şifre giriniz" weakLabel="Zayıf"
									goodLabel="Orta seviye" strongLabel="Güçlü" />
						
						<h:outputText value="Inline Feedback: " />
						<p:password id="inlineFeedback" value="#{passwordBean.password4}" inline="true" />
						
						<h:outputText value="Custom Feedback: " />
						<p:password id="customFeedback" value="#{passwordBean.password5}" inline="true" onshow="fadein" onhide="fadeout"/>
					</h:panelGrid>
				</p:panel>
                
                <p:spacer height="10" />
                
                <p:panel header="Match Mode">
                    <p:messages id="messages" showDetail="true" autoUpdate="true"/>
                    
                    <h:panelGrid columns="2" id="matchGrid">                   
                        <h:outputLabel for="pwd1" value="Password 1: *" />
                        <p:password id="pwd1" value="#{passwordBean.password6}" feedback="false" match="pwd2" label="Password 1" required="true"/>

                        <h:outputLabel for="pwd2" value="Password 2: *" />
                        <p:password id="pwd2" value="#{passwordBean.password6}" feedback="false" label="Password 2" required="true"/>
                    </h:panelGrid>
                    
                    <p:commandButton id="saveButton" update="matchGrid" value="Save" />
                </p:panel>

			</h:form>
			
			<h3>Source</h3>
            <p:tabView>
                <p:tab title="password.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
		
    &lt;p:panel header="Enter your passwords"&gt;
        &lt;h:panelGrid columns="2"&gt;
            &lt;h:outputText value="Non-Feedback: " /&gt;
            &lt;p:password value="\#{passwordBean.password1}" feedback="false" /&gt;

            &lt;h:outputText value="Feedback: " /&gt;
            &lt;p:password value="\#{passwordBean.password2}" /&gt;

            &lt;h:outputText value="Feedback (Turkish): " /&gt;
            &lt;p:password value="\#{passwordBean.password3}" promptLabel="Lütfen şifre giriniz" weakLabel="Zayıf"
                        goodLabel="Orta seviye" strongLabel="Güçlü" /&gt;

            &lt;h:outputText value="Inline Feedback: " /&gt;
            &lt;p:password value="\#{passwordBean.password4}" inline="true" /&gt;

            &lt;h:outputText value="Custom Feedback: " /&gt;
            &lt;p:password value="\#{passwordBean.password5}" inline="true" onshow="fadein" onhide="fadeout"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:panel&gt;

    &lt;p:panel header="Match Mode"&gt;
        &lt;p:messages showDetail="true" autoUpdate="true"/&gt;

        &lt;h:panelGrid columns="2" id="matchGrid"&gt;                   
            &lt;h:outputLabel for="pwd1" value="Password 1: *" /&gt;
            &lt;p:password id="pwd1" value="\#{passwordBean.password6}" feedback="false" match="pwd2" label="Password 1" required="true"/&gt;

            &lt;h:outputLabel for="pwd2" value="Password 2: *" /&gt;
            &lt;p:password id="pwd2" value="\#{passwordBean.password6}" feedback="false" label="Password 2" required="true"/&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:commandButton update="matchGrid" value="Save" /&gt;
    &lt;/p:panel&gt;

&lt;/h:form&gt;

&lt;script type="text/javascript"&gt;
    function fadein(input, container) {
        container.fadeIn("slow");
    }

    function fadeout(input, container) {
        container.fadeOut("slow");
    }
&lt;/script&gt;
                    </pre>
                </p:tab>
                <p:tab title="PasswordBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

public class PasswordBean {

	private String password1;
	private String password2;
	private String password3;
	private String password4;
    private String password5;
    private String password6;
    private String password7;

	public String getPassword1() {
		return password1;
	}

	public void setPassword1(String password1) {
		this.password1 = password1;
	}

	public String getPassword2() {
		return password2;
	}

	public void setPassword2(String password2) {
		this.password2 = password2;
	}

	public String getPassword3() {
		return password3;
	}

	public void setPassword3(String password3) {
		this.password3 = password3;
	}
	
	public String getPassword4() {
		return password4;
	}

	public void setPassword4(String password4) {
		this.password4 = password4;
	}

    public String getPassword5() {
        return password5;
    }

    public void setPassword5(String password5) {
        this.password5 = password5;
    }

    public String getPassword6() {
        return password6;
    }

    public void setPassword6(String password6) {
        this.password6 = password6;
    }
}
                    </pre>
                </p:tab>
            </p:tabView>

		</div>

	</ui:define>
</ui:composition>
